<template>
  <div class="app-container">
    <el-form ref="infoForm" :model="infoForm" label-position="right" label-width="90px">
      <el-row :gutter="30">
        <el-col :span="6" :xs="24">
          <el-form-item label="商户" prop="name">
            <el-input size="small" disabled v-model="infoForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item label="仓库" prop="warehouseId">
            <el-select v-model="infoForm.warehouseId" placeholder="请选择">
              <el-option v-for="item in warehouseSelectList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item label="是否质检" prop="isCheck">
            <el-switch v-model="infoForm.isCheck"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-button type="primary" size="small" @click="skuDetailVisible=true">添加货品</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 选择品牌，匹配名称后自动弹出唯一匹配的sku及下属物料 -->
    <el-dialog title="sku详情" :visible.sync="skuDetailVisible" width="80%">
      <el-row :gutter="30">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="left" label-width="40px">

          <el-col :span="6">
            <el-form-item label="品牌 " size="small">
              <el-select v-model="formInline.brandId" placeholder="请选择" value-key="id" @change="changeBrand">
                <el-option v-for="item in brandSelectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称" size="small">
              <el-autocomplete class="inline-input" v-model="formInline.name" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="selectSkuName"></el-autocomplete>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <el-row :gutter="30" v-if="skuData">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="left" label-width="40px">
          <el-col :span="6">
            <el-form-item label="分类">
              <span>{{ skuData.category }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="材质">
              <span>{{ skuData.material }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="颜色">
              <span>{{ skuData.color }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="图片">
              <el-image style="width: 90px; height: 60px" :src="attachUrl+skuData.picUrl"
            :preview-src-list="[attachUrl+skuData.picUrl]" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div>
        <span>包含物料</span>
        <el-button type="primary" size="mini" style="float:right">添加</el-button>
      </div>

      <el-table :data="materialTableData" border style="width: 100%" ref="materialTable">
        <el-table-column type="selection"></el-table-column>
        <el-table-column property="name" label="物料名称" align="center"></el-table-column>
        <el-table-column property="material" label="材质" align="center" :formatter="materialFormatter"></el-table-column>
        <el-table-column property="color" label="颜色" align="center"></el-table-column>
        <el-table-column property="len" label="长" align="center"></el-table-column>
        <el-table-column property="width" label="宽" align="center"></el-table-column>
        <el-table-column property="height" label="高" align="center"></el-table-column>
        <el-table-column property="weight" label="重量" align="center"></el-table-column>
        <el-table-column property="volume" label="体积" align="center"></el-table-column>
      </el-table>
    </el-dialog>

    <!--  <el-dialog :fullscreen="showAll" :visible.sync="addProductDialogVisable" :show-close="false" :close-on-click-modal="false" width="1400px">
      <slot name="title">
        <div class="dialog-header">
          <div class="dialog-title">下单</div>
          <div>
            <el-button class="dialog-btn" type="text" icon="el-icon-full-screen" @click="showAll = !showAll"></el-button>
            <el-button class="dialog-btn" type="text" icon="el-icon-close" @click="closeWin"></el-button>
          </div>
        </div>
      </slot>
      <editForm ref="editForm" :activeMerchantId="activeMerchantId" style="width: 100%" @closeWin="closeWin" @getList="getList"></editForm>
    </el-dialog> -->
  </div>
</template>

<script>
import api from './js/handler.js';
import editForm from './edit';
export default {
  components: {
    editForm
  },
  data() {
    return {
      infoForm: {},
      formInline: {},
      warehouseSelectList: [],
      brandSelectList: [],
      restaurants: [],
      addProductDialogVisable: false,
      activeMerchantId: '',
      showAll: false,
      skuDetailVisible: false,
      skuData: {},
      materialTableData: [],
      categorySelectList: [],
      materialSelectList: []
    };
  },
  created() {
    this.infoForm.name = this.$route.query.transHandlerData.activeMerchant.name;
    this.activeMerchantId = this.$route.query.transHandlerData.activeMerchant.id;
    this.getwarehouseSelectList();
    this.getbrandSelectListByOperator();
    this.getCategorySelectList()
    this.getMaterialSelectList()
    this.$nextTick(() => {
      this.$refs.materialTable.toggleRowSelection(this.materialTableData[0], true)
    })
  },
  methods: {
    getwarehouseSelectList() {
      var param = {
        type: 0,
        page: 1,
        limit: 1000
      };
      api.getwarehouseSelectList(param).then(res => {
        this.warehouseSelectList = res.data.records;
      });
    },
    getbrandSelectListByOperator() {
      let queryParam = {};
      api.getbrandSelectList(queryParam).then(res => {
        this.brandSelectList = res.data;
      });
    },
    getCategorySelectList() {
      api.getCategorySelectList().then(res => {
        this.categorySelectList = res.data;
      });
    },
    getMaterialSelectList() {
      this.listConf('material').then(res => {
        this.materialSelectList = res.data;
      });
    },
    changeBrand() {
      this.listAllSkuName();
    },
    selectSkuName() {
      // 查询匹配的sku
      let queryParm = {
        merchantId: this.activeMerchantId,
        brandId: this.formInline.brandId,
        name: this.formInline.name,
        from: 0,
        size: 1
      };
      api.getSku(queryParm).then(res => {
        // this.skuDetailVisible = true;
        this.skuData = res.data.datas[0];
        // 根据id替换相应的名
        this.skuData.category = this.categorySelectList.find(v => v.id == this.skuData.categoryId).name
        this.skuData.material = this.materialSelectList.find(a => a.k == this.skuData.material).v
      });
      // 查询匹配的物料
      let queryParm2 = {
        merchantId: this.activeMerchantId,
        brandId: this.formInline.brandId,
        skuName: this.formInline.name,
        from: 0,
        size: 10000
      };
      api.getMaterial(queryParm2).then(res => {
        this.materialTableData = res.data.datas;
      });
    },
    materialFormatter(row) {
      return this.materialSelectList.find(a => a.k == row.material).v
    },
    // 根据商户，品牌，查询所有的sku名
    listAllSkuName() {
      let queryParams = {
        merchantId: this.activeMerchantId,
        brandId: this.formInline.brandId,
        from: 0,
        size: 10000,
        status: 1 //启用
      };
      api.listAllSkuName(queryParams).then(res => {
        this.restaurants = res.data;
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      console.log(restaurants);
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    // getList() {},
    //  添加货品按钮
    addProduct() {
      this.addProductDialogVisable = true;
    },
    closeWin() {
      this.addProductDialogVisable = false;
    }
  }
};
</script>

<style></style>
